<!--
 * @Author: guo wei
 * @LastEditors: [guo wei]
 * @LastEditTime: 2024-01-06 23:05:26
 * @Description: 
-->
<template>
  <div class="color-wrap">
    <el-button type="primary" @click="addColor">添加颜色</el-button>
    <el-table :data="tableData">
      <el-table-column
        label="颜色名称"
        prop="colorName"
        align="center"
        width="200"
      />
      <el-table-column label="图片" width="200" align="center">
        <template #default="scope">
          <div
            class="color-tag"
            :style="{ 'background-color': '#' + scope.row.colorImage }"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="冷/暖色" prop="tone" width="200" align="center">
      </el-table-column>
      <el-table-column
        label="色系"
        width="200"
        prop="colorSystemValue"
        align="center"
      >
        <template #default="scope">
          <div
            class="color-system-wrap"
            v-for="item in scope.row.colorRelVOLst"
            :key="item.colorSystemInfoId"
          >
            <div class="color-system-value">{{ item.colorSystemName }}</div>
            <div
              class="color-system-tag"
              :style="{ 'background-color': '#' + item.colorSystemValue }"
            ></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button size="small" @click="handlDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" prop="colorName">
            <el-input
              v-model="ruleForm.colorName"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="颜色" prop="colorImage">
            <el-color-picker v-model="ruleForm.colorImage" />
          </el-form-item>
          <el-form-item label="冷暖色" prop="colorType">
            <el-select
              v-model="ruleForm.colorType"
              multiple
              placeholder="请选择"
            >
              <el-option label="冷" value="冷" />
              <el-option label="暖" value="暖" />
            </el-select>
          </el-form-item>
          <el-form-item label="色系选择" prop="colorRelDTOS">
            <el-select
              v-model="ruleForm.colorRelDTOS"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in colorOptions"
                :key="index"
                :label="item.colorSystemName"
                :value="item.colorSystemInfoId"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCreateColor">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, ref, reactive, nextTick } from "vue";
import {
  colorInfos,
  getColorSystemInfos,
  addColorInfo,
  modifyColorInfo,
  deleteColorInfo,
} from "@/api/building-type";
import { getFilesUrl } from "@/utils/index";
import { ElMessage, ElMessageBox } from "element-plus";
const search = ref("");
const dialogVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  colorName: "",
  colorImage: "",
  colorRelDTOS: [],
  colorType: [],
});
const rules = reactive({
  colorImage: [{ required: true, message: "请选择颜色", trigger: "change" }],
  colorRelDTOS: [{ required: true, message: "请选择色系", trigger: "change" }],
  colorType: [{ required: true, message: "请选择冷暖色", trigger: "change" }],
  colorName: [{ required: true, message: "请输入名称", trigger: "blur" }],
});
const colorOptions = ref([]);
const getColorOptions = async () => {
  try {
    const params = { count: true, pageId: 1, pageSize: 20 };
    const res = await getColorSystemInfos(params);
    colorOptions.value = res.result.list || [];
  } catch (error) {}
};
getColorOptions();
const tableData = ref([]);
const getListData = async () => {
  const params = { count: true, pageId: 1, pageSize: 20 };
  try {
    const res = await colorInfos(params);
    if (res.code == 200) {
      let temp =
        res.result.list.map(async (x) => {
          return {
            ...x,
          };
        }) || [];
      tableData.value = await Promise.all(temp);
      console.log("tabledata", tableData.value);
    }
  } catch (error) {}
};
getListData();
const dialogTitle = ref("添加分类");
const dialogType = ref("add");
const currentRowId = ref("");
const handleEdit = (index, row) => {
  console.log(index, row);
  dialogVisible.value = true;
  dialogTitle.value = "编辑颜色";
  dialogType.value = "edit";
  currentRowId.value = row.id;
  nextTick(() => {
    ruleForm.colorImage = row.colorImage;
    ruleForm.colorName = row.colorName;
    ruleForm.colorType = row.tone.split(",");
    ruleForm.colorRelDTOS = row.colorRelVOLst.map((x) => x.colorSystemInfoId);
  });
};
const handlDelete = (index, row) => {
  ElMessageBox.confirm("确认删除吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await deleteColorInfo({
        colorInfoId: row.colorInfoId,
        recordVersion: row.recordVersion,
      });
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getListData();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

const addColor = () => {
  dialogVisible.value = true;
  dialogTitle.value = "添加颜色";
  dialogType.value = "add";
  currentRowId.value = "";
  nextTick(() => {
    ruleFormRef.value.resetFields();
  });
};
const confirmCreateColor = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      const params = {
        ...ruleForm,
        tone: ruleForm.colorType.join(","),
        colorRelDTOS: ruleForm.colorRelDTOS.map((x) => {
          return { colorSystemInfoId: x };
        }),
      };
      delete params.colorType;
      try {
        if ((dialogType.value = "add")) {
          const res = await addColorInfo(params);
          if (res.code == 200) {
            dialogVisible.value = false;
            getListData();
          }
          return false;
        }
        const res = await modifyColorInfo(params);
        if (res.code == 200) {
          dialogVisible.value = false;
          getListData();
        }
        console.log("submit!", params);
        // dialogVisible.value = false;
      } catch (error) {}
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 弹框中的颜色选择器
const color = ref("#409EFF");
</script>
<style lang="scss" scoped>
.color-wrap {
  padding: 20px;
  .color-tag {
    width: 25px;
    height: 25px;
    margin: 0 auto;
    border: 1px solid #409eff;
  }
  .el-table {
    margin-top: 15px;
  }
}
.color-system-tag {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  border: 1px solid #409eff;

  margin-left: 5px;
}
.color-system-wrap {
  display: flex;
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
  .color-system-value {
    flex: 1;
  }
}
</style>
